<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环境指数公众版</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
	<link rel="stylesheet" type="text/css" href="assets/css/source.css">
	<link rel="stylesheet" type="text/css" href="assets/js/need/layer.css">
</head>
<body>
	<div class="pb-content">
		<p class="source_tit">国控源监控</p>
		<div id="source_map"></div>
		<div class="source_tit">
			<input type="" name="" placeholder="输入企业名称查询" class="input queryInput">
			<button class="btn jsQuery">搜索</button>
		</div>
		<div class="source_list">
			<!--<ul>
				<li>
					<a href="#">溧水天山水泥有限公司</a>
				</li>
				<li>
					<a href="#"> 溧水经济开发区喜旺污水处理厂</a>
				</li>
				<li>
					<a href="#"> 中石化股份有限公司金陵分公司</a>
				</li>
				<li>
					<a href="#">中国水泥厂有限公司 </a>
				</li>
				<li>
					<a href="#">中国石油化工股份</a>
				</li>
				<li>
					<a href="#">中国石油化工股份有限公司金陵分公司分公司分公司</a>
				</li>
			</ul>-->
		</div>
		
	</div>
	<footer id="public_footer">
		<ul>
			<li>
				<a href="public.html">
					<span class="foot_pic environment"></span>
					<span>环境质量</span>
				</a>
			</li>
			
			<li>
				<a href="car.html">
					<span class="foot_pic motor"></span>
					<span>机动车环保</span>
				</a>
			</li>
			<li class="active">
				<a href="source.html">
					<span class="foot_pic monitoring"></span>
					<span>国控源监控</span>
				</a>
			</li>
		</ul>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/layer.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EO5oHjEfgBz7QieWfqG08jcx"></script>
<script type="text/javascript">
	var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  	}
  	var map = new BMap.Map("source_map");
	var point = new BMap.Point(118.931918,32.15609);
	map.centerAndZoom(point, 12);
  	
  	function mapMoveTo(obj){
  		var $obj = $(obj);
  		map.panTo(new BMap.Point($obj.attr("data-jd"), $obj.attr("data-wd")));
  	}
  	
  	function querySearch(s){
  		getJSONData(URL+'/gkyjc?name='+s,function(data){
  			var _html = "";
	  		//console.log(data);
	  		if(data.success){
	  			var list = data.data;
	  			$.each(list, function(i,e) {
	  				_html = _html + "<li>\
						<a href=\"#\" data-jd=\""+e.jd+"\" data-wd=\""+e.wd+"\" onclick=\"mapMoveTo(this)\">"+e.name+"</a>\
					</li>";
	  			});
	  			$(".source_list").empty().append("<ul>"+_html+"</ul>");
	  		}
	  		
	  		//移除覆盖物
	  		map.clearOverlays();
	  		
	  		var  lat,lng,point,marker,position,html,fsData = [], fqData = [], fsfqData = [];
	  		// 百度地图API功能
			var icon1 = new BMap.Icon('assets/img/fs.png',new BMap.Size(35, 46));
			var icon2 = new BMap.Icon('assets/img/fq.png',new BMap.Size(35, 45));
			var icon3 = new BMap.Icon('assets/img/fsfq.png',new BMap.Size(50, 45));
			$.each(data.data,function(name,index){
				lat = index.jd;
				lng = index.wd;
				point = new BMap.Point(lat,lng);
				var marker = new BMap.Marker(
					point,
					{icon: index.is_fs == 1 && index.is_fq == 1 ? icon3 : (index.is_fs == 1 && index.is_fq == null ? icon1 : icon2)} 
				);
				map.addOverlay(marker);
				marker.addEventListener("click",function(e){
					position = marker.getPosition();
					map.panTo(new BMap.Point(position.lng,position.lat));
					if(index.is_fs == 1&&index.is_fq == null){
						getJSONData(URL+'/fs?name='+index.name,function(data){
							fsData = data.data;
							if(fsData.length>0){
								showInfos('fs',fsData);
							}
						});
					}else if(index.is_fs == null&&index.is_fq == 1){
						getJSONData(URL+'/fq?name='+index.name,function(data){
							fqData = data.data;
							if(fqData.length>0){
								showInfos('fq',fqData);
							}
						});
					}else if(index.is_fs == 1&&index.is_fq == 1){
						getJSONData(URL+'/fs?name='+index.name,function(data){
							fsfqData.fsData = data.data;
							getJSONData(URL+'/fq?name='+index.name,function(data2){
								fsfqData.fqData = data2.data;
								if(fsfqData.length>0){
									showInfos('fsfq',fsfqData);
								}
							});
						});
					}
				});
			});
  		})
  	}
  	
  	$(function(){
	  	$(".jsQuery").on("click",function(){
	  		var s = $(".queryInput").val();
	  		querySearch(s);
	  	})
  	})
  	
  	getJSONData(URL+'/gkyjc',function(data){
  		var _html = "";
  		//console.log(data);
  		if(data.success){
  			var list = data.data;
  			$.each(list, function(i,e) {
  				_html = _html + "<li>\
					<a href=\"#\" data-jd=\""+e.jd+"\" data-wd=\""+e.wd+"\" onclick=\"mapMoveTo(this)\">"+e.name+"</a>\
				</li>";
  			});
  			$(".source_list").empty().append("<ul>"+_html+"</ul>");
  		}
  		var  lat,lng,point,marker,position,html,fsData = [], fqData = [], fsfqData = [];
  		// 百度地图API功能
		var icon1 = new BMap.Icon('assets/img/fs.png',new BMap.Size(35, 46));
		var icon2 = new BMap.Icon('assets/img/fq.png',new BMap.Size(35, 45));
		var icon3 = new BMap.Icon('assets/img/fsfq.png',new BMap.Size(50, 45));
		$.each(data.data,function(name,index){
			lat = index.jd;
			lng = index.wd;
			point = new BMap.Point(lat,lng);
			var marker = new BMap.Marker(
				point,
				{icon: index.is_fs == 1 && index.is_fq == 1 ? icon3 : (index.is_fs == 1 && index.is_fq == null ? icon1 : icon2)} 
			);
			map.addOverlay(marker);
			marker.addEventListener("click",function(e){
				position = marker.getPosition();
				map.panTo(new BMap.Point(position.lng,position.lat));
				if(index.is_fs == 1&&index.is_fq == null){
					getJSONData(URL+'/fs?name='+index.name,function(data){
						fsData = data.data;
						if(fsData.length>0){
							showInfos('fs',fsData);
						}
					});
				}else if(index.is_fs == null&&index.is_fq == 1){
					getJSONData(URL+'/fq?name='+index.name,function(data){
						fqData = data.data;
						if(fqData.length>0){
							showInfos('fq',fqData);
						}
					});
				}else if(index.is_fs == 1&&index.is_fq == 1){
					getJSONData(URL+'/fs?name='+index.name,function(data){
						fsfqData.fsData = data.data;
						getJSONData(URL+'/fq?name='+index.name,function(data2){
							fsfqData.fqData = data2.data;
							if(fsfqData.length>0){
								showInfos('fsfq',fsfqData);
							}
						});
					});
				}
			});
		});
  	});
	
	function showInfos(type,data){
		//console.log(data);
		html = '<div class="source-layer">'
				if(type == 'fq' && data.length>0){
					html+= '<p class="marker-tit"><span class="line"></span><span class="layer-title">'+data[0].qymc+'</span><span class="time">'+data[0].jcrq+'</span></p>'
						+'<div class="marker-table">'
						+'<table>'
								+'<thead>'
									+'<tr>'
										+'<td rowspan="2" colspan="1">废气监控点名称</td>'
										+'<td rowspan="2" colspan="1">日排放量(万标立方米)</td>'
										+'<td rowspan="1" colspan="2">SO2(mg/m3)</td>'
										+'<td rowspan="1" colspan="2">Nox(mg/m3)</td>'
										+'<td rowspan="1" colspan="2">烟尘(mg/m3)</td>'
									+'</tr>'
									+'<tr>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
									+'</tr>'
								+'</thead>'
								+'<tbody>';
								$(data).each(function(index,element){
									html +='<tr>'
										+'<td>'+element.jkdmc+'</td>'
										+'<td>'+element.rpel+'</td>'
										+'<td>'+element.so2rjz+'</td>'
										+'<td>'+element.so2bzxz+'</td>'
										+'<td>'+element.noxrjz+'</td>'
										+'<td>'+element.noxbzxz+'</td>'
										+'<td>'+element.ycrjz+'</td>'
										+'<td>'+element.ycbzxz+'</td>'
									+'</tr>'
								});
								html +='</tbody>'
							+'</table>'
						+'</div>'
					+'</div>';
				}

				if(type == 'fs' && data.length>0){
					html+= '<p class="marker-tit"><span class="line"></span><span class="layer-title">'+data[0].name+'</span><span class="time">'+data[0].date+'</span></p>'
						+'<div class="marker-table">'
						+'<table>'
								+'<thead>'
									+'<tr>'
										+'<td rowspan="2" colspan="1">废水监控点名称</td>'
										+'<td rowspan="2" colspan="1">日排放量(吨)</td>'
										+'<td rowspan="1" colspan="2">COD(mg/L)</td>'
										+'<td rowspan="1" colspan="2">NH3N(mg/L)</td>'
										+'<td rowspan="2" colspan="1">检查情况</td>'
									+'</tr>'
									+'<tr>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
									+'</tr>'
								+'</thead>'
								+'<tbody>';
								$(data).each(function(index,element){
									html +='<tr>'
										+'<td>'+element.jkdmc+'</td>'
										+'<td>'+element.rpel+'</td>'
										+'<td>'+element.rjz_cod+'</td>'
										+'<td>'+element.bzxz_cod+'</td>'
										+'<td>'+element.rjz_nh3n+'</td>'
										+'<td>'+element.bzxz_nh3n+'</td>'
										+'<td>'+element.jcqk+'</td>'
									+'</tr>'
								});
								html +='</tbody>'
							+'</table>'
						+'</div>'
					+'</div>';
				}

				if(type == 'fsfq'){
					if(data.fqData.length>0){
						html+= '<p class="marker-tit"><span class="line"></span><span class="layer-title">'+data.fqData[0].qymc+'</span><span class="time">'+data.fqData[0].jcrq+'</span></p>';
					}else if(data.fsData.length>0){
						html+= '<p class="marker-tit"><span class="line"></span><span class="layer-title">'+data.fsData[0].name+'</span><span class="time">'+data.fsData[0].date+'</span></p>';
					}
					if(data.fqData.length>0){
						html += '<div class="marker-table">'
							+'<table>'
								+'<thead>'
									+'<tr>'
										+'<td rowspan="2" colspan="1">废气监控点名称</td>'
										+'<td rowspan="2" colspan="1">日排放量(万标立方米)</td>'
										+'<td rowspan="1" colspan="2">SO2(mg/m3)</td>'
										+'<td rowspan="1" colspan="2">Nox(mg/m3)</td>'
										+'<td rowspan="1" colspan="2">烟尘(mg/m3)</td>'
									+'</tr>'
									+'<tr>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
									+'</tr>'
								+'</thead>'
								+'<tbody>';
								$(data.fqData).each(function(index,element){
									html +='<tr>'
										+'<td>'+element.jkdmc+'</td>'
										+'<td>'+element.rpel+'</td>'
										+'<td>'+element.so2rjz+'</td>'
										+'<td>'+element.so2bzxz+'</td>'
										+'<td>'+element.noxrjz+'</td>'
										+'<td>'+element.noxbzxz+'</td>'
										+'<td>'+element.ycrjz+'</td>'
										+'<td>'+element.ycbzxz+'</td>'
									+'</tr>'
								});
								html +='</tbody>'
							+'</table>'
						+'</div>'
					}
					if(data.fsData.length>0){
						html +='<div class="marker-table">'
						+'<table>'
								+'<thead>'
									+'<tr>'
										+'<td rowspan="2" colspan="1">废水监控点名称</td>'
										+'<td rowspan="2" colspan="1">日排放量(吨)</td>'
										+'<td rowspan="1" colspan="2">COD(mg/L)</td>'
										+'<td rowspan="1" colspan="2">NH3N(mg/L)</td>'
										+'<td rowspan="2" colspan="1">检查情况</td>'
									+'</tr>'
									+'<tr>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
										+'<td>日均值</td>'
										+'<td>标准限值</td>'
									+'</tr>'
								+'</thead>'
								+'<tbody>';
								$(data.fsData).each(function(index,element){
									html +='<tr>'
										+'<td>'+element.jkdmc+'</td>'
										+'<td>'+element.rpel+'</td>'
										+'<td>'+element.rjz_cod+'</td>'
										+'<td>'+element.bzxz_cod+'</td>'
										+'<td>'+element.rjz_nh3n+'</td>'
										+'<td>'+element.bzxz_nh3n+'</td>'
										+'<td>'+element.jcqk+'</td>'
									+'</tr>'
								});
								html +='</tbody>'
							+'</table>'
						+'</div>'
					}
					
				+'</div>';
				}
		layer.open({
		    type: 1
		    ,content: html
		    ,anim: 'up'
		    ,style: 'position:fixed; bottom:0; left:0; width: 100%; border:none;'
		});		
	}
</script>
</html>